<template>
  <div class="btn">
    <div v-if="loading">
      <img :src="loadUrl" alt="" width="16" height="16">
      <span> {{  loadingText }}</span>
    </div>
    <slot v-else></slot>
  </div>
</template>


<script setup>
import  loadUrl from '@/assets/place.jpg';
import { defineProps } from 'vue'

const props = defineProps(['loading', 'loading-text'])
console.log(props.loading)
</script>

<style lang="scss">
$blue: #1989fa;
$green: #07c160;
.btn {
  padding: 12px;
  border: 1px solid #ccc;
  display: inline-block;
  border-radius: 4px;
  &[type=primary] {
    background-color: $blue;
    color: white;
  }

  &[type=success] {
    background-color: $green;
    color: white;
  }
}
</style>

